.main_content {
  width: 100%;
  height: 100%;
  background: #f5f3ff;
  border-radius: 20rpx;
}

.content {
  width: 100%;
  height: calc(100% - 140rpx);
  padding: 60rpx 120rpx;
}

.scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  width: 720rpx;
  padding: 20rpx;
  margin-bottom: 60rpx;
  border-radius: 10rpx;
  background: #d4e4f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  &:nth-child(2n + 1) {
    margin-right: 140rpx;
  }

  .title {
    font-size: 28rpx;
    color: #fefefe;
  }
}

.box {
  width: 100%;
  height: 286rpx;
  margin-top: 10rpx;
  padding: 16rpx 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow-y: auto;
}

.section {
  width: 100%;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #e0e0e0;

  &:last-child {
    border-bottom: 0;
  }
}

.section_title {
  font-size: 28rpx;
  color: #b8b8b8;
}

.info {
  width: 100%;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .time {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .time_content {
      text {
        font-size: 24rpx;
        color: #b8b8b8;
        line-height: 32rpx;
      }
    }
  }

  .status {
    width: 124rpx;
    height: 48rpx;
    border: 2rpx solid #858585;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active1 {
      border: 2rpx solid #858585;

      text {
        color: #333;
      }
    }

    &.active2 {
      border: 2rpx solid #a0c443;

      text {
        color: #a0c443;
      }
    }

    &.active3 {
      border: 2rpx solid #ffc71c;

      text {
        color: #ffc71c;
      }
    }

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.button {
  width: 100%;
  margin-top: 10rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;

  .button_content {
    width: 164rpx;
    height: 56rpx;
    margin-left: 28rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.button1 {
      background: #0091ea;
    }

    &.button2 {
      background: #ffc71c;
    }

    &.button3 {
      background: #32b16c;
    }

    &.button4 {
      background: #a0c443;
    }

    text {
      font-size: 28rpx;
      color: #fff;
    }
  }
}

.default {
  width: 100%;
  padding-top: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 501rpx;
  }
}